<template>
    <div class="wrappers">
        <div class="wrapper">
            <div class="wrapper_div_title">
                <div class="wrapper_div_content wrapper_div_contents">年</div>
                <div class="wrapper_div_content wrapper_div_contents">月</div>
                <div class="wrapper_div_content wrapper_div_contents">日</div>
                <div class="wrapper_div_content wrapper_div_contents">时</div>
                <div class="wrapper_div_content wrapper_div_contents">分</div>
                <div class="wrapper_div_content wrapper_div_contents">秒</div>
            </div>
            <div class="wrapper_div">
                <div class="flex wrapper_divs">
                    <div class="wrapper_div_content"
                        :class="item + 1999 == datetime[0] ? 'wrapper_div_content_hover ' : ''" v-for="item in year"
                        @click="getyear(item)">{{ item + 1999 }}</div>
                </div>
                <div class="flex wrapper_divs">
                    <div class="wrapper_div_content" :class="item == datetime[1] ? 'wrapper_div_content_hover ' : ''"
                        v-for="item in month" @click="getmonth(item)">{{ item < 10 ? "0" + item : item }}</div>
                    </div>
                    <div class="flex wrapper_divs">
                        <div class="wrapper_div_content"
                            :class="item == datetime[2] ? 'wrapper_div_content_hover ' : ''" v-for="item in day"
                            @click="getday(item)">{{ item < 10 ? "0" + item : item }}</div>
                        </div>
                        <div class="flex wrapper_divs">
                            <div class="wrapper_div_content"
                                :class="item == datetime[3] ? 'wrapper_div_content_hover ' : ''" v-for="item in hour"
                                @click="gethour(item)">{{ item - 1 < 10 ? "0" + (item - 1) : item - 1 }}</div>
                            </div>
                            <div class="flex wrapper_divs">
                                <div class="wrapper_div_content"
                                    :class="item == datetime[4] ? 'wrapper_div_content_hover ' : ''" v-for="item in min"
                                    @click="getmin(item)">{{ item - 1
                                        < 10 ? "0" + (item - 1) : item - 1 }}</div>
                                </div>
                                <div class="flex wrapper_divs">
                                    <div class="wrapper_div_content"
                                        :class="item == datetime[5] ? 'wrapper_div_content_hover ' : ''"
                                        v-for="item in second" @click="getsecond(item)">
                                        {{ item - 1 < 10 ? "0" + (item - 1) : item - 1 }}</div>
                                    </div>
                                </div>
                                <div class="wrappers_footer">
                                    <span class="spanContent">当前选择时间：{{ timeData }}</span>
                                    <button class="queding" @click="sure()">确定</button>
                                    <button class="quxiao" @click="close()">取消</button>
                                </div>
                            </div>

                        </div>

</template>

<script>

export default {
    components: {
    },
    data() {
        return {
            datetime: ["2000", "1", "1", "1", "1", "1"],
            year: 100,
            second: 60,
            hour: 24,
            min: 60,
            day: 31,
            month: 12,
            timeData: ""

        }
    },
    created() {
        this.timeFun()

    },
    mounted() {

    },
    methods: {
        timeFun() {
            const date = new Date(); // 获取当前时间的 Date 对象
            const year = date.getFullYear(); // 年份
            const month = date.getMonth() + 1; // 月份，需要加 1，因为月份从 0 开始算起
            const day = date.getDate(); // 天数
            const hour = date.getHours(); // 小时
            const minute = date.getMinutes(); // 分钟
            const second = date.getSeconds(); // 秒钟
            console.log(year, month, day, hour, minute, second);
            this.datetime = [year, month, day, hour, minute, second]
            this.timeData = this.datetimeFun()
        },
        sure() {
            this.timeData = this.datetimeFun()
            console.log(this.timeData);
            let time=this.timeData.toString().replace(/\s+/g,"T")
            // console.log(window.ue,time);
            window.ue.timer.updatetime(time)
            // localStorage.setItem('timeData', (this.timeData).toString())
            // window.postMessage({ data: this.timeData }, "*")
            // console.log(window);
            // window.addEventListener('message', function (e) {
            //     let message_data = e.data.data
            //     console.log("~~~~~~~~~:", message_data)
            // }, false)
        },
        close() {
            this.datetime = ["2000", "1", "1", "1", "1", "1"]
            window.ue.timer.updatetime("")
            // window.postMessage({ data: "" }, "*")
            //  window.addEventListener('message', function (e) {
            //     let message_data = e.data.data
            //     console.log("~~~~~~~~~:", message_data)
            // }, false)
        },
        datetimeFun() {
            let year = this.datetime[0]
            let month = this.datetime[1] < 10 ? "0" + this.datetime[1] : this.datetime[1]
            let day = this.datetime[2] < 10 ? "0" + this.datetime[2] : this.datetime[2]
            let hour = this.datetime[3] - 1 < 10 ? "0" + (this.datetime[3] - 1) : this.datetime[3] - 1
            let min = this.datetime[4] - 1 < 10 ? "0" + (this.datetime[4] - 1) : this.datetime[4] - 1
            let second = this.datetime[5] - 1 < 10 ? "0" + (this.datetime[5] - 1) : this.datetime[5] - 1
            let time = year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + second
            return time
        },
        isLeapYear(year) {
            if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
                return true;
            } else {
                return false;
            }
        },
        //根据年月得到天数
        getDayNumByYearMonth(year, month) {
            month = month * 1
            year = year * 1
            console.log(year, month);
            switch (month) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    return 31;
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    return 30;
                    break;
                case 2:
                    console.log(this.isLeapYear(year));

                    return this.isLeapYear(year) == true ? 29 : 28;
                    break;
            }
        },
        getyear(item) {
            this.datetime[0] = item + 1999
            this.day = this.getDayNumByYearMonth(this.datetime[0], this.datetime[1])
            this.timeData = this.datetimeFun()
        },
        getmonth(item) {
            this.datetime[1] = item
            this.day = this.getDayNumByYearMonth(this.datetime[0], this.datetime[1])
            this.timeData = this.datetimeFun()
            console.log(this.day);
        },
        getday(item) {
            this.datetime[2] = item
            this.timeData = this.datetimeFun()
        },
        gethour(item) {
            this.datetime[3] = item
            this.timeData = this.datetimeFun()
        },
        getmin(item) {
            this.datetime[4] = item
            this.timeData = this.datetimeFun()
        },
        getsecond(item) {
            this.datetime[5] = item
            this.timeData = this.datetimeFun()
        },
    }
}
</script>
<style lang="scss" scoped>
.wrappers {
    width: 420px;
    height: 270px;

}

.wrapper {
    // background-color: black;
    // background-color: green;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    padding: 5% 5% 10% 5%;
}

.wrapper_div {
    display: grid;
    grid-template-columns: repeat(6, 16.7%);
    width: 100%;
    height: 80%;
    // background-color: rgba(0, 0, 0, 0.5);
    
}

.wrapper_div_title {
    display: grid;
    grid-template-columns: repeat(6, 16.6%);
    height: 20%;

    .wrapper_div_content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        // background-color: rgba(0, 0, 0, 0.5);
        color: green;
        font-weight: bold;

    }

}

.wrapper_divs {
    display: flex;
    width: 100%;
    height: 80%;
    display: grid;
    grid-template-rows: repeat(100, 20%);
    overflow-y: auto;
    position: relative;

    /* 隐藏垂直滚动条 */
    &::-webkit-scrollbar {
        width: 0;
    }

    .wrapper_div_content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        // background-color: green;
        color: white;
        font-weight: bold;
    }

    .wrapper_div_content_hover {
        color: green;
        font-weight: bold;
        font-size: 16px;

    }

    .wrapper_div_contents {
        position: fixed;
        top: 0;
        width: 100%;
        height: 20%;
        justify-content: center;
        align-items: center;

    }
}

.wrappers_footer {
    width: 100%;

    .spanContent {
        float: left;
        color: green;
        margin-top: 10px;
    }

    .quxiao {
        width: 40px;
        height: 26px;
        float: right;
        font-size: 12px;

    }

    .queding {
        margin-left: 16px;
        font-size: 12px;
        width: 40px;
        height: 26px;
        float: right;
    }

}
</style>